<template>
  <el-container
    :style="{
      backgroundColor: setColor,
      backgroundImage: 'url(' + setImg + ')',
      backgroundSize: '100%',
    }"
  >
    <!-- 头部导航 -->
    <el-header>
      <ul>
        <li
          v-for="item in navList"
          :key="item.id"
          @click="getPage(item)"
          :class="navIndex == item.id ? 'active' : ''"
        >
          {{ item.name }}
        </li>
      </ul>

      <div @click="showDialog" class="draw-content">
        <el-tooltip
          effect="dark"
          content="网站设置"
          placement="bottom-start"
          :hide-after="1000"
          ><span class="iconfont icon-liebiao"></span
        ></el-tooltip>
      </div>
      <!-- 右侧抽屉 -->
      <el-drawer
        title="网站设置"
        :visible.sync="dialogVisible"
        :direction="direction"
        :before-close="handleClose"
      >
        <div class="bgc-color">更换主题</div>
        <div class="sel-color">
          <div
            class="space-color"
            v-for="item in colorList"
            :key="item.id"
            :style="{
              background: item.color,
              border: item.id === 1 ? '1px solid #ccc' : '',
            }"
            @click="changeColor(item)"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="line-outer"><div class="line"></div></div>
        <div class="bgc-color bgc-img">更换背景</div>
        <div class="sel-color sel-img">
          <div
            class="space-color space-img"
            v-for="item in imgList"
            :key="item.id"
            @click="changeImg(item)"
          >
            <img :src="item.imgMiniUrl" alt="" />
          </div>
        </div>
      </el-drawer>
    </el-header>
    <!-- 内容主体区域 -->
    <el-main>
      <!-- 路由占位符 -->
      <router-view></router-view>
    </el-main>
    <!-- 底部信息 -->
    <el-footer>
      <div class="foot-font">©2022 Easy to search</div>
    </el-footer>
  </el-container>
</template>

<script>
import { setStore, getStore, removeStore, setStoreSession, getStoreSession } from '../utils/setStorage.js'
import localData from '../utils/localData.js'
export default {
  data () {
    return {
      // 导航列表
      navList: localData.navList,
      // 默认选中
      navIndex: 1,
      // 控制右侧抽屉
      dialogVisible: false,
      // 右侧展开
      direction: 'rtl',
      // 主题色列表
      colorList: localData.colorList,
      // 默认主题色
      setColor: '#fff',
      //   默认背景图片
      setImg: '',
      // 背景图片列表
      imgList: localData.imgList
    }
  },
  methods: {
    // 更改背景图
    changeImg (item) {
      this.setColor = ''
      this.setImg = item.imgUrl
      removeStore('themeColor')
      setStore('bgImg', item.id)
    },
    // 更改主题色
    changeColor (item) {
      this.setImg = ''
      this.setColor = item.color
      removeStore('bgImg')
      setStore('themeColor', item.color)
    },
    // 右侧抽屉关闭
    handleClose (done) {
      done()
    },
    // 显示右侧对话框
    showDialog () {
      this.dialogVisible = true
    },
    // 页面路由切换
    getPage (item) {
      this.navIndex = item.id
      setStoreSession('navIndex', this.navIndex)
      this.$router.push(item.path)
    }
  },
  computed: {},
  created () {
    // 获取主题色
    this.setColor = getStore('themeColor')
    // 获取背景图
    const id = getStore('bgImg')
    const a = this.imgList.find((item) => {
      return item.id === Number(id)
    })
    // 获取选中Nav选项
    this.navIndex = getStoreSession('navIndex') || '1'
    // console.log(a, 'a')
    this.setImg = a.imgUrl || ''
  }
}
</script>
<style lang="less" scoped>
/*定义颜色*/
@link-color:#409EFF; // sea blue
@link-color-hover:#66B1FF;
.active {
  background-color: @link-color;
  color: #fff !important;
}
.el-container {
  width: 100%;
  height: 100vh;
  .el-header {
    > ul {
      text-align: center;
      display: inline-block;
      width: 260px;
      height: 32px;
      margin: auto 0;
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      > li {
        width: 62px;
        height: 100%;
        list-style: none;
        line-height: 32px;
        color: #444;
        font-weight: 400;
        font-family: -apple-system, Noto Sans SC, Microsoft YaHei, helvetica,
          "sans-serif";
        border-radius: 5px;
        cursor: pointer;
        &:hover {
          background-color: @link-color-hover;
          color: #fff;
        }
      }
    }
    .draw-content {
      width: 30px;
      height: 30px;
      cursor: pointer;
      position: absolute;
      top: 20px;
      right: 20px;
      .iconfont {
        font-size: 22px;
      }
    }
    .el-drawer {
      .bgc-color {
        color: #555;
        margin-left: 20px;
      }
      .sel-color {
        margin: 15px 0 0 20px;
        width: 420px;
        height: 40px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .space-color {
          width: 75px;
          height: 100%;
          border-radius: 5px;
          cursor: pointer;
          margin-bottom: 20px;
          line-height: 40px;
          text-align: center;
          &:hover {
            opacity: 0.8;
          }
        }
      }
      .line-outer {
        margin: 20px 0;
        width: 100%;
        height: 1px;
        display: flex;
        justify-content: center;
        .line {
          width: 93%;
          height: 0.6px;
          background-color: #ddd;
        }
      }

      .bgc-img {
        margin: 15px 0 0 15px;
      }
      .sel-img {
        .space-img {
          width: 96px;
          height: 54px;
          > img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  .el-footer {
    height: 30px !important;
    position: absolute;
    bottom: 0px;
    font-size: 14px;
    color: #555;
    display: flex;
    justify-content: center;
    width: 100%;
    .foot-font {
      width: 200px;
      text-align: center;
    }
  }
}
</style>
